<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    window.addEventListener("load", function(){
        var btn = document.getElementById("button");
        btn.addEventListener("click", function(){
            console.log("btn click..");
            document.body.innerHTML +="<h1>이벤트에 의해 추가됨</h1>";
            // innerHTML은 텍스트 기반으로 문자열을 바탕으로 새로 구성함. 
            //이때 기존의 버튼(event handler)은 없어졌다. btn element 가 없어짐 화면에 있는 Button은 전혀 다른 버튼(리스너가 안달려있다.)
            // 지우고 쓴다.
        });
    });	
</script>
</head>
<body>
    <button id="button">버튼</button>
    <button onclick="document.body.innerHTML +='<h1>이벤트에 의해 추가됨</h1>'">inline</button>
</body>
</html>